<template>
	<view class="app">
		<!-- 搜索 -->
		<view class="main-header">
			<view @click="openType" class="nav">
				<van-icon name="wap-nav" />
			</view>
			<view class="search-input">
				<van-icon name="search" />
				<input
					@click="goSearch"
					type="text"
					placeholder="请输入关键词搜索"
				/>
			</view>
			<view class="search"> <van-icon name="search" /> </view>
		</view>
		<!-- 内容 -->
		<view class="main-content">
			<van-tabs
				title-active-color="#3e9df8"
				color="#3e9df8"
				title-inactive-color="#7d7e80"
				swipeable
				:ellipsis="false"
				:lock-scroll="true"
				@click="switchCate"
			>
				<van-tab title="推荐"></van-tab>
				<van-tab
					v-for="(item, i) in myChannel"
					:key="i"
					:title="item"
				></van-tab>
			</van-tabs>
			<scroll-view
				lower-threshold="50"
				:refresher-triggered="state.isRefresh"
				refresher-enabled
				@refresherrefresh="refresh"
				@scrolltolower="scrolltolower"
				class="product-list"
				scroll-y
			>
				<view
					class="item"
					v-for="(item, index) in cateArticleList"
					:key="index"
					@click="goArticleDetails(item.uid)"
				>
					<view class="title">{{ item.tatle }}</view>
					<view v-if="item.wztp.length" class="cover">
						<image
							v-for="(item, index) in item.wztp"
							:key="index"
							:src="item"
							mode=""
						></image>
					</view>
					<view class="info">
						<view class="left">
							<text class="category">{{ item.userName }}</text>
							<text class="category">{{ item.pl }}评论</text>
							<text class="category">{{ dayjs(item.time).format('YYYY-MM-DD') }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
	<van-popup
		@close="closeShow"
		:show="ishow"
		position="left"
		custom-style="height: 100%; width: 85%"
	>
		<view class="content">
			<view @click="closeShow" class="close"
				><van-icon name="cross"
			/></view>
			<view class="my-title">
				<view class="left">我的频道</view>
				<view @click="operation" class="right my-title-edit">{{
					isOperation ? '完成' : '操作'
				}}</view>
			</view>
			<view class="my-channel-list">
				<view v-for="(item, i) in myChannel" :key="i" class="item">
					<text
						@click="remove(item, i)"
						class="remove"
						:class="{ active: !isOperation }"
						>x</text
					>
					<text>{{ item }} </text>
				</view>
			</view>
			<view class="out-channel">
				<view class="my-title">频道推荐</view>
				<view class="my-channel-list">
					<view v-for="(item, i) in recommend" :key="i" class="item">
						<text @click="addChannel(item, i)">+ {{ item }} </text>
					</view>
				</view>
			</view>
		</view>
	</van-popup>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reactive, ref, toRefs, watch } from 'vue'
import { cateArticleApi } from '../../api/modules/article'
import { UserStore } from '../../store/user.js'
import dayjs from 'dayjs'
const userStore = UserStore()
const state = reactive({
	ishow: false,
	isRefresh: false,
	isHas: false,
	// 分类id
	className: '',
	// 页码
	page: 1,
	// 每页条数
	size: 10,
	// 获取文章分类列表
	cateArticleList: []
})

const cate = reactive({
	isOperation: false,
	myChannel: uni.getStorageSync('MYCHANNEL') || [
		'开发者',
		'设计',
		'iOS',
		'android',
		'后端',
		'php',
		'面试',
		'c+ +',
		'测试开发',
		'css',
		'区块链',
		'数据库',
		'go',
		'产品',
		'linux',
		'人工智能',
		'JavaScript',
		'框架',
		'前端',
		'python',
		'Java',
		'算法',
		'科技动态',
		'js',
		'数码产品',
		'html',
		'软件测试'
	],
	recommend: uni.getStorageSync('RECOMMEND') || []
})
const openType = () => {
	state.ishow = true
}
const closeShow = () => {
	state.ishow = false
}
const goSearch = () => {
	uni.navigateTo({
		url: '/subpkg/search/search'
	})
}

const goArticleDetails = uid => {
	const id = userStore.info.id || ''
	uni.navigateTo({
		url: `/subpkg/details-article/details-article?uid=${uid}&id=${id}`
	})
}

// 获取分类数据
const getCategory = async () => {}

// 获取分类文章数据
const getCateArticle = async () => {
	const { data } = await cateArticleApi({
		className: state.className,
		page: state.page,
		size: state.size
	})
	state.cateArticleList = [...state.cateArticleList, ...data.data]
	state.isRefresh = false
	state.isHas = data.data.length !== 0
}

// 上拉刷新
const refresh = () => {
	state.isRefresh = true
	state.cateArticleList = []
	state.page = 1
	getCateArticle()
}

// 下拉加载
const scrolltolower = () => {
	if (!state.isHas) return
	state.page += 1
	getCateArticle()
}

const remove = (item, i) => {
	cate.myChannel.splice(i, 1)
	cate.recommend.unshift(item)
}

const addChannel = (item, i) => {
	cate.myChannel.push(item)
	cate.recommend.splice(i, 1)
}

const switchCate = e => {
	const name = e.detail.title
	if (name === '推荐') {
		state.className = ''
		refresh()
	} else {
		state.className = name
		refresh()
	}
}

const operation = () => {
	cate.isOperation = !cate.isOperation
}

watch(
	() => [cate.myChannel, cate.recommend],
	() => {
		uni.setStorageSync('MYCHANNEL', cate.myChannel)
		uni.setStorageSync('RECOMMEND', cate.recommend)
	},
	{ deep: true }
)

// 页面加载
onLoad(message => {
	getCateArticle()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { ishow, cateArticleList } = toRefs(state)
const { recommend, myChannel, isOperation } = toRefs(cate)
</script>

<style lang="scss">
.product-list {
	height: 100%;
}
.main-header {
	height: 128rpx;
	width: 700rpx;
	display: flex;
	position: sticky;
	z-index: 99;
	top: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	padding: 0 24rpx;
	background-color: #3194ff;
	color: #fff;
	font-size: 40rpx;
	.search-input {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		color: #323233;
		flex: 1;
		border-radius: 80rpx;
		height: 64rpx;
		line-height: 64rpx;
		margin: 0 20rpx;
		box-sizing: border-box;
		background-color: #f7f8fa;
		font-size: 28rpx;
		input {
			margin-left: 20rpx;
		}
	}
}
.main-content {
	height: calc(100vh - 128rpx - 88rpx);
	overflow: hidden;
	.van-tabs__nav {
		border-bottom: 2rpx solid #ccc;
	}
	.item {
		border-bottom: 1rpx solid #edeff3;
		&:last-child {
			border-bottom: 0;
		}
		.title {
			font-size: 48rpx;
			font-weight: 500;
			color: #3a3a3a;
			// padding: 12rpx 0;
			letter-spacing: 1px;
			padding: 16rpx 24rpx;
		}
		.cover {
			display: flex;
			align-items: center;
			padding: 16rpx 24rpx;
			image {
				flex-basis: 33%;
				width: 116px;
				height: 73px;
				border-radius: 2px;
			}
		}
		.info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			color: #cfcfcf;
			padding: 16rpx 24rpx;
			.left {
				font-size: 24rpx;
				color: #999;
				text:nth-child(2) {
					margin-left: 20rpx;
					margin-right: 20rpx;
				}
			}
			.right {
				text-align: center;
				border: 0.5px solid #edeff3;
				padding: 0 5px;
				height: 14px;
				line-height: 14px;
				border-radius: 2px;
			}
		}
	}
}
.content {
	padding: 18rpx;
	.close {
		font-size: 64rpx;
		text-align: left;
		cursor: pointer;
	}
	.my-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #2c3e50;
		margin-top: 10rpx;
		.my-title-edit {
			color: #f85a5a;
			font-size: 12px;
			border-radius: 20px;
			border: 1px solid #f85a5a;
			padding: 2px 8px;
			cursor: pointer;
		}
	}
	.my-channel-list {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		.item {
			font-size: 28rpx;
			color: #fff;
			background-color: rgb(150, 151, 153);
			margin-left: 20rpx;
			padding: 10rpx 20rpx;
			margin-top: 28rpx;
			cursor: pointer;
			position: relative;
		}
		.remove {
			width: 16rpx;
			height: 16rpx;
			line-height: 16rpx;
			text-align: center;
			border-radius: 50%;
			background-color: rgb(205, 205, 205);
			padding: 8rpx 8rpx;
			cursor: pointer;
			position: absolute;
			font-size: 28rpx;
			right: -10rpx;
			top: -20rpx;
		}
		.active {
			display: none;
		}
	}
	.out-channel {
		margin-top: 80rpx;
	}
}
</style>
